<template>
  <div class="custom-date-picker">
    <el-date-picker
      :type="type"
      v-model="dateValue"
      :placeholder="placeholder"
      :format="format"
      :value-format="valueFormat"
      :disabled="disabled"
      :clearable="clearable"
      :readonly="readonly"
      style="width: 100%"
      class="date-input"
      @change="handleChange"
      @blur="handleBlur"
      @focus="handleFocus"
    />
    <div class="input__prefix" v-if="showIcon">
      <!-- <el-icon><Calendar /></el-icon> -->
       <img src="@/assets/icon/calendar.svg" alt="" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Calendar } from '@element-plus/icons-vue';

interface Props {
  modelValue?: string | Date | null;
  type?: 'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'year';
  placeholder?: string;
  format?: string;
  valueFormat?: string;
  disabled?: boolean;
  clearable?: boolean;
  readonly?: boolean;
  showIcon?: boolean;
  label?: string;
}

const props = withDefaults(defineProps<Props>(), {
  type: 'date',
  placeholder: '选择日期',
  format: 'YYYY-MM-DD',
  valueFormat: 'YYYY-MM-DD',
  disabled: false,
  clearable: true,
  readonly: false,
  showIcon: true,
  label: ''
});

// 使用未显式类型的 emit，避免宏类型推断异常导致的重载冲突
const emit = defineEmits();

const dateValue = ref(props.modelValue);

// 监听外部值变化
watch(() => props.modelValue, (newValue) => {
  dateValue.value = newValue;
});

// 监听内部值变化 -> 同步给父组件 (支持 v-model)
watch(dateValue, (newValue) => {
  emit('update:modelValue', newValue);
});

const handleChange = (value: string | Date | null) => {
  // el-date-picker change 时也同步一次，保证双向绑定即时
  emit('update:modelValue', value);
  emit('change', value);
};

const handleBlur = (event: FocusEvent) => {
  emit('blur', event);
};

const handleFocus = (event: FocusEvent) => {
  emit('focus', event);
};
</script>

<style scoped lang="scss">
.custom-date-picker {
  position: relative;
  width: 100%;
}

.date-input {
  width: 100%;

  :deep(.el-input__wrapper) {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    padding: 0;
    
    &.is-focus {
      border: none !important;
      box-shadow: none !important;
    }
    
    &:hover {
      border: none !important;
      box-shadow: none !important;
    }
    
    .el-input__inner {
      font-size: 14px;
      color: #333;
      border: none !important;
      outline: none !important;
      background: transparent;
    }
    
    .el-input__prefix,
    .el-input__suffix {
      display: none;
    }
  }
  
  :deep(.el-input) {
    border: none !important;
    box-shadow: none !important;
  }
}
  ::v-deep(.el-input__prefix) {
    display: none;
    position: relative;
  }
.input__prefix {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  
  .el-icon {
    font-size: 16px;
    color: #999;
    opacity: 0.6;
  }
}

// 带标签的样式
.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  
  label {
    font-family: Microsoft YaHei, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
  }
}
</style>
